import React, { Component } from 'react';
import { Button, } from "@arco-design/web-react";
import { IconBytedanceColor } from '@arco-design/web-react/icon';
import { CSSTransition } from 'react-transition-group';

class Cartoon extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShow: true,
        }
        this.changeShow=this.changeShow.bind(this);
    }


    changeShow() {
        this.setState({
            isShow: this.state.isShow ? false : true,
        })
    }

    render() {
        return (
            <div>   
                {/* <div className={this.state.isShow ? 'show' : 'hide'}>悟空<IconBytedanceColor /></div> */}
                
                <CSSTransition in={this.state.isShow} timeout={2000} classNames={"boss-text"}>
                <div>悟空122222221<IconBytedanceColor /></div>
                </CSSTransition>

                <div><Button onClick={this.changeShow}>召唤BOSS</Button></div>
            </div>
        );
    }
}

export default Cartoon;